import Swiper from "_c/swiper";

import "./index.scss";

const SWIPER_ITEM = [
  {
    tab: "在线表单",
    info: "简单拖拽即可创建表单，发布填写链接、即可快速回收数据，常用于信息收集",
    img: "https://blog-assets.jiandaoyun.com/index/home/home_step1.png",
    icons: {
      ya: "https://blog-assets.jiandaoyun.com/index/outsourcing/2020jdy-g04-1.png",
      yb: "https://blog-assets.jiandaoyun.com/index/outsourcing/2020jdy-g01-1.png",
      yc: "https://blog-assets.jiandaoyun.com/index/outsourcing/2020jdy-g01-2.png",
    },
  },
  {
    tab: "流程引擎",
    info: "根据团队业务，灵活设计流程流转规则。常用于财务审批、申请申报等",
    img: "https://blog-assets.jiandaoyun.com/index/home/home_step2.png",
    icons: {
      ya: "https://blog-assets.jiandaoyun.com/index/outsourcing/2020jdy-g02-2.png",
      yb: "https://blog-assets.jiandaoyun.com/index/outsourcing/2021jdy-g01-2.png",
      yc: "https://blog-assets.jiandaoyun.com/index/outsourcing/2020jdy-g05-1.png",
    },
  },
  {
    tab: "仪表盘",
    info: "将收集来的数据进行统计、分析、对比。常用于分析业绩趋势、财务状况等",
    img: "https://blog-assets.jiandaoyun.com/index/home/home_step3.png",
    icons: {
      ya: "https://blog-assets.jiandaoyun.com/index/outsourcing/2020jdy-g03-2.png",
      yb: "https://blog-assets.jiandaoyun.com/index/outsourcing/2020jdy-g01-2.png",
      yc: "https://blog-assets.jiandaoyun.com/index/outsourcing/2021jdy-g01-3.png",
    },
  },
];

export default function Process() {
  function getSwipwerItemNode(item, index) {
    const iconNode = Object.keys(item.icons).map((key) => (
      <span className={`icon ${key}`} key={key}>
        <img src={item.icons[key]} alt="" />
      </span>
    ));

    return (
      <div key={index}>
        <div className="step-info">
          {item.info}
          <span className="show-detail">查看详情</span>
        </div>
        {iconNode}
        <img className="step-img" src={item.img} alt="" />
      </div>
    );
  }

  return (
    <div className="process">
      <div className="bricks">
        <div className="bricks-primary-title">
          三步快速搭建应用，满足个性化管理需求
        </div>
        <Swiper
          slideRenderFn={getSwipwerItemNode}
          swiperList={SWIPER_ITEM}
          width={1175}
          loop={true}
          autoPlay={true}
          interval={3000}
          duration={0.3}
          drag={true}
          trigger={"click"}
        ></Swiper>
      </div>
    </div>
  );
}
